import React,{useReducer} from 'react';
import ReactDOM from 'react-dom';
/* 
function App(){
  let [count,dispatch] = useReducer((count,action)=>{
    switch (action.type) {
      case 'add':
        return count + action.num
      case 'minus':
        return count - action.num
      default:
        return 100
    }
  },100)
  return <>
    <h1>数字是：{count}</h1>
    <button onClick={()=>dispatch({type:'add',num:10})}>+</button>
    <button onClick={()=>dispatch({type:'minus',num:5})}>-</button>
  </>
} */


function App2(){
  let reducer = (state,action)=>{
    switch (action.type) {
      case 'add':
        return {
          ...state,
          count:state.count + action.num
        }
      case 'minus':
        return {
          ...state,
          count:state.count - action.num
        }
      case 'changeName123':
        return {
          ...state,
          name:action.qqq
        }  
      default:
        return {
          ...state
        }
    }
  }
  let [state,dispatch] = useReducer(reducer,{count:100,name:"珠峰"})
  const add = ()=>{
    dispatch({type:"add",num:10})
  }
  return <>
    <h1>{state.name}数字是：{state.count}</h1>
    <button onClick={add}>+</button>
    <button onClick={()=>dispatch({type:'minus',num:5})}>-</button>
    <input type="text" value={state.name} onChange={(e)=>{dispatch({type:'changeName123',qqq:e.target.value})}}/>
  </>
}


ReactDOM.render(<App2/>,document.getElementById('root'))